<template>
  <div>
    <el-row :gutter="10" style="margin-top: 20px">
      <el-form ref="formRef" label-width="180px" style="display: flex">
        <el-form-item label="">
          <template>
            <el-button
              icon="el-icon-plus"
              type="success"
              @click="addSubmit"
              :disabled="!checkPermission('liveImg-add')"
              >新增</el-button
            >
          </template>
        </el-form-item>
        <el-form-item label="直播名字:">
          <el-input
            v-model="formRef.name"
            placeholder="请输入直播名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="直播类型:">
          <el-select v-model="formRef.type" placeholder="请输入直播类型">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="btnSearch"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10">
      <el-table
        :data="formattedDates"
        style="width: 100%"
        stripe
        :header-cell-style="{
          background: '#eef1f6',
          color: '#606266',
          textAlign: 'center',
        }"
        border
      >
        <el-table-column prop="id" label="直播id" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名字" align="center">
        </el-table-column>
        <el-table-column prop="watchNumber" label="观看人数" align="center">
        </el-table-column>
        <el-table-column prop="status" label="直播状态" align="center">
          <template v-slot="{ row }">
            {{ row.status === 1 ? "正在直播" : "结束直播" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectedTime"
          label="预计时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="type" label="直播类型" align="center">
          <template v-slot="{ row }">
            {{
              row.type === 0
                ? "风景类"
                : row.type === 1
                ? "时事类"
                : row.type === 2
                ? "政务类"
                : "销售类"
            }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="290px">
          <template v-slot="{ row }">
            <el-button
              href="#"
              class="stop"
              style="color: red"
              @click="btnStop(row)"
              :disabled="row.status === 0 && !checkPermission('liveImg-cease')"
              >更改状态</el-button
            >
            <el-button
              href="#"
              class="details"
              style="color: blue"
              :disabled="!checkPermission('liveImg-show')"
              @click="$router.push(`/detail/${row.id}`)"
              >详情</el-button
            >
            <el-button
              href="#"
              class="link"
              style="color: blue"
              :disabled="!checkPermission('liveImg-link')"
              @click="btnLink(row.id)"
            >
              链接
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="pageParams.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        :current-page="pageParams.page"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="changePage"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 新增弹层 -->
    <add-depts
      ref="addDept"
      :dialogVisible.sync="dialogVisible"
      @liveStreamingList="liveStreamingList"
    ></add-depts>

    <!-- h5图片直播的链接弹层 -->
    <el-dialog title="h5图片直播链接" :visible.sync="dialogLinkVisible">
      <div>
        <a :href="'https://pic.nbblmc.cn?id=' + this.linkId">{{
          "https://pic.nbblmc.cn?id=" + linkId
        }}</a>
      </div>
      <div slot="footer">
        <el-button @click="closeLink">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  liveStreamingListApi,
  stopLiveStreamingApi,
} from "@/api/liveBroadcast";
import AddDepts from "@/views/dashboard/components/add-depts.vue";
export default {
  name: "dashboard",
  components: { AddDepts },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      total: 0,
      formRef: {
        name: "",
        type: "",
      },
      pageParams: {
        page: 1,
        pageSize: 10,
        name: "",
        type: "",
      },
      id: "",
      status: "",
      dialogLinkVisible: false,
      linkId: "",
      linkText: "",
      options: ["风景类", "时事类", "政务类", "销售类"],
      typeMapping: {
        风景类: 0,
        时事类: 1,
        政务类: 2,
        销售类: 3,
      },
    };
  },
  created() {
    this.liveStreamingList();
  },
  computed: {
    formattedDates() {
      // 格式化日期
      return this.tableData.map((item) => ({
        ...item,
        createTime: this.formatSeconds(item.createTime),
        endTime: this.formatSeconds(item.endTime),
      }));
    },
  },
  methods: {
    // 封装一个转化时间的函数
    formatSeconds(seconds) {
      // 将秒数转化为日期格式
      const date = new Date(seconds);
      return date.toLocaleString();
    },

    // 列表渲染
    async liveStreamingList() {
      const res = await liveStreamingListApi(this.pageParams);
      // console.log(res);
      // console.log(res.data.records);
      this.tableData = res.data.records;
      this.total = res.data.total;
    },
    // 新增
    addSubmit() {
      this.dialogVisible = true;
    },

    // 点击了分页组件的页码的时候
    changePage(page) {
      this.pageParams.page = page;
      // 重新获取列表数据
      this.liveStreamingList();
    },

    // 每页显示的条数发生改变
    handleSizeChange(val) {
      this.pageParams.pageSize = val;
      // 重新获取列表数据
      this.liveStreamingList();
    },

    // 点击停止
    async btnStop(row) {
      this.id = row.id;
      // console.log(row);
      const res = await stopLiveStreamingApi(this.id);
      // console.log(res);
      if (res.code === 1) {
        this.$message.success("更改状态成功");
        row.status = 0;
      }
      this.liveStreamingList();
    },

    btnLink(id) {
      this.dialogLinkVisible = true;
      this.linkId = id;
    },

    // 关闭链接弹层
    closeLink() {
      this.dialogLinkVisible = false;
    },

    // 搜索
    btnSearch() {
      // const typeMapping = this.typeMapping[this.formRef.type];
      // 增加一个属性
      this.$set(this.pageParams, "name", this.formRef.name);
      this.$set(this.pageParams, "type", this.typeMapping[this.formRef.type]);
      // 重新渲染
      this.liveStreamingList();
      this.formRef.name = "";
      this.formRef.type = "";
    },
  },
};
</script>

<style></style>
